import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'overview-fault-detail',
    styleUrls: ["./fault-details.less"],
    template: `
        <div>
            <div>
                <nz-tabset>
                    <nz-tab nzTitle='未处理'>
                        <div class="form-bar-nohandle">
                            <div>
                                <span>站点：</span>
                                <nz-select ngModel="line_val_nohandle" nzPlaceHolder="请选择">
                                    <nz-option nzValue="1" nzLabel="一号线"></nz-option>
                                    <nz-option nzValue="2" nzLabel="二号线"></nz-option>
                                    <nz-option nzValue="3" nzLabel="三号线"></nz-option>
                                </nz-select>
                            </div>
                            <div>
                                <span>故障等级：</span>
                                <nz-select ngModel="fault_val_nohandle" nzPlaceHolder="请选择">
                                    <nz-option nzValue="1" nzLabel="故障1"></nz-option>
                                    <nz-option nzValue="2" nzLabel="故障2"></nz-option>
                                    <nz-option nzValue="3" nzLabel="故障3"></nz-option>
                                </nz-select>
                            </div>
                            <div>
                                <button nz-button nzType="primary">查询</button>
                            </div>
                        </div>
                        <nz-table #basicTable [nzData]="table_data_nohandle" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>故障等级</th>
                                    <th>站点</th>
                                    <th>故障内容</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of basicTable.data">
                                    <td>{{ data.time }}</td>
                                    <td>{{ data.level }}</td>
                                    <td>{{ data.site }}</td>
                                    <td>{{ data.content }}</td>
                                    <td >
                                        <button nz-button nzType="primary">处理</button>
                                    </td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </nz-tab>
                    <nz-tab nzTitle='已处理'>
                    <div class="form-bar-handled">
                            <div>
                                <span>站点：</span>
                                <nz-select ngModel="line_val_nohandle" nzPlaceHolder="请选择">
                                    <nz-option nzValue="1" nzLabel="一号线"></nz-option>
                                    <nz-option nzValue="2" nzLabel="二号线"></nz-option>
                                    <nz-option nzValue="3" nzLabel="三号线"></nz-option>
                                </nz-select>
                            </div>
                            <div>
                                <span>故障等级：</span>
                                <nz-select ngModel="fault_val_nohandle" nzPlaceHolder="请选择">
                                    <nz-option nzValue="1" nzLabel="故障1"></nz-option>
                                    <nz-option nzValue="2" nzLabel="故障2"></nz-option>
                                    <nz-option nzValue="3" nzLabel="故障3"></nz-option>
                                </nz-select>
                            </div>
                            <div>
                                <button nz-button nzType="primary">查询</button>
                            </div>
                        </div>
                        <nz-table #basicTable [nzData]="table_data_nohandle" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>故障等级</th>
                                    <th>站点</th>
                                    <th>故障内容</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of basicTable.data">
                                    <td>{{ data.time }}</td>
                                    <td>{{ data.level }}</td>
                                    <td>{{ data.site }}</td>
                                    <td>{{ data.content }}</td>
                                    <td >
                                        <button nz-button nzType="primary">处理</button>
                                    </td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </nz-tab>
                </nz-tabset>
            </div>
        </div>
    `
})


export class FaultDetailComponent implements OnInit {

    line_val_nohandle: string = "1"
    fault_val_nohandle: string = "1"
    line_val_handle: string = "1"

    table_data_nohandle = [
        {
            key: "1",
            time: '2016-09-05 15:00',
            level: '一级',
            site: '长沙市雨花区',
            content: '阈值报警'
        },
        {
            key: "2",
            time: '2016-09-05 15:00',
            level: '二级',
            site: '长沙市岳麓区',
            content: '阈值报警'
        },
        {
            key: "3",
            time: '2016-09-05 15:00',
            level: '三级',
            site: '长沙市天心区',
            content: '阈值报警'
        }
    ]
    ngOnInit(): void {

    }
}